<!--  -->
<template>
  <div class="forget">
    <div class="f-bold f-24">忘记密码</div>
    <div class="line mt-14"></div>
    <cube-input class="mobile" v-model="mobile" placeholder="手机号" clearable autofocus></cube-input>
    <cube-validator ref="mobile" v-model="valid[0]" :model="mobile" :rules="rules"></cube-validator>
    <div class="vcode flex aligin-center">
      <cube-input class="vcode-input" v-model="vcode" placeholder="手机号验证码" clearable autofocus></cube-input>
      <span
        class="timer"
        @click="sendVcode"
      >{{((typeof this.vcodeCount)==="string")?vcodeCount:vcodeCount+'s'}}</span>
    </div>
    <cube-validator ref="vcode" v-model="valid[1]" :model="vcode" :rules="vcodeRules"></cube-validator>
    <cube-input
      class="password"
      v-model="password"
      placeholder="输入密码"
      type="password"
      clearable
      :eye="{open:false}"
    ></cube-input>
    <cube-validator ref="password" v-model="valid[2]" :model="password" :rules="passwordRules"></cube-validator>
    <cube-input
      class="password"
      v-model="rPassword"
      placeholder="再次输入密码"
      type="password"
      clearable
      :eye="{open:false}"
    ></cube-input>
    <cube-validator ref="rPassword" v-model="valid[3]" :model="rPassword" :rules="passwordRules"></cube-validator>
    <button class="z-btn color-white f-16" @click="submit">确定</button>
  </div>
</template>

<script>
import { resetPassword, getMsgCode } from "../api/api";
import myMixin from "../mixin/md5";
export default {
  mixins: [myMixin],
  components: {},
  data() {
    return {
      key: "",
      iv: "",
      mobile: "", //手机号
      password: "", //密码
      rPassword: "", //确认密码
      vcode: "", //验证码
      vcodeTimer: null, //验证码计时器
      vcodeCount: "获取验证码",
      valid: [undefined, undefined, undefined, undefined], //校验结果
      rules: {
        required: true,
        type: "tel"
      },
      vcodeRules: {
        required: true
      },
      passwordRules: {
        required: true
      }
    };
  },
  computed: {},
  watch: {},
  methods: {
    //发送验证码
    sendVcode() {
      if (!(typeof this.vcodeCount === "string")) {
        return;
      }
      const mobile = this.$refs.mobile.validate();
      Promise.all([mobile]).then(() => {
        if (this.valid[0]) {
          this.vcodeCount = 60;
          this.vcodeTimer = setInterval(() => {
            if (this.vcodeCount - 1 < 0) {
              this.vcodeCount = "获取验证码";
              clearInterval(this.vcodeTimer);
              this.vcodeTimer = null;
            } else {
              this.vcodeCount -= 1;
            }
          }, 1000);
          getMsgCode({ mobile: this.mobile }).then(({ data: { result } }) => {
            this.key = result.key;
            this.iv = result.iv;
          });
        } else {
          const toast = this.$createToast({
            txt: "手机号有误",
            type: "error"
          });
          toast.show();
        }
      });
    },
    //提交
    submit() {
      if(!(this.key&&this.iv)){
        this.$toast("请获取验证码")
        return
      }
      const mobile = this.$refs.mobile.validate();
      const password = this.$refs.password.validate();
      const rPassword = this.$refs.rPassword.validate();
      const vcode = this.$refs.vcode.validate();
      Promise.all([mobile, password, rPassword, vcode]).then(() => {
        if (this.valid.every(item => item)) {
          if(this.password.trim().length<6){
            this.$toast("密码长度不能小于6位")
            return
          }
          let params = {
            mobile: this.mobile,
            new_password: this.encrypt(this.password, this.key, this.iv),
            confirm_password: this.encrypt(this.rPassword, this.key, this.iv),
            msgCode: this.vcode
          };
          resetPassword(params).then(res => {
            if (res.data.result.token) {
              this.$store.commit("saveToken", res.data.result.token);
              this.$router.replace({ path: "/index/home" });
            }
          });
        }
      });
    }
  },
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.f-24 {
  font-size: 24px;
}
.forget /deep/ .cube-input {
  box-shadow: 0px 5px 20px 2px rgba(162, 162, 162, 0.19);
}
.forget /deep/ .cube-input:after {
  border: none;
}
.forget {
  height: 100%;
  padding: 93px 41px 0 41px;
  box-sizing: border-box;
  .line {
    margin-left: 7px;
    width: 30px;
    height: 3px;
    background: #ea373f;
  }
  .mobile {
    margin: 54px 0 0 0;
    height: 44px;
    font-size: 14px;
  }
  .vcode {
    margin: 16px 0 0 0;
    height: 44px;
    font-size: 14px;
    box-shadow: 0px 5px 20px 2px rgba(162, 162, 162, 0.19);
  }
  .vcode-input {
    width: 180px;
    height: 44px;
    box-shadow: none;
  }
  .timer {
    height: 44px;
    line-height: 44px;
    flex: 1;
    text-align: center;
    box-shadow: 0px 5px 20px 2px rgba(162, 162, 162, 0.19);
  }
  .user {
    margin: 16px 0 0 0;
    height: 44px;
    font-size: 14px;
  }
  .password {
    margin: 16px 0 0 0;
    height: 44px;
    font-size: 14px;
  }
  .z-btn {
    margin: 30px 0 0 0;
    width: 100%;
    height: 44px;
    background: #999999;
  }
}
</style>